<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GRID</title>
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery-ui.min.js"></script>
</head>
<style> 
 .houzhuo_table{ 
 	border:0px solid #eeeeee;
 	border-collapse: collapse; 
 	table-layout: fixed; 
 }
  .houzhuo_table td{   
 	 border:1px solid #eeeeee;
 	 word-break:break-all;
 	 word-wrap:break-all; 
 }
  .houzhuo_table th{
 	border-top:0px solid #eeeeee;
 	border-left:1px solid #eeeeee;
 	border-right:1px solid #eeeeee; 
 	border-bottom:0px solid #eeeeee;
 	word-break:break-all; 
 	word-wrap:break-all;
 	font-weight:bold; 
 }
 
  
 .houzhuo_divbody{
 	border-top:0px solid #eeeeee;
 	border-left:1px solid #eeeeee;
 	border-right:1px solid #eeeeee; 
 	border-bottom:1px solid #eeeeee;
 	overflow-x:auto;
 	overflow-y:auto; 
 }
 .houzhuo_divhead{
 	border-top:1px solid #eeeeee;
 	border-left:1px solid #eeeeee;
 	border-right:1px solid #eeeeee; 
 	border-bottom:1px solid #eeeeee;
 	background:#eee; 
 	overflow:hidden; 
 }
 .houzhuo_divfoot{ 
 	border-top:0px;
 	border-left:1px solid #eeeeee;
 	border-right:1px solid #eeeeee; 
 	border-bottom:1px solid #eeeeee;
 }
 .tddiv{  
    line-height: 40px;
    margin-left:15px;
    position: relative;
    box-sizing: border-box; 
    overflow: hidden;
    text-overflow:ellipsis;  
    word-break:break-all; 
 	word-wrap:break-word; 
 	white-space: nowrap;
 	text-overflow: ellipsis; 
 }
 ul.pagination {
	display:inline-block;
	padding:0px;
	margin:0px;
	margin-left:15px;
	margin-bottom:5px;
	margin-top:8px;
}
ul.pagination li {
	display:inline;
}
ul.pagination li a {
	color:black;
	float:left; 
	padding:2px 4px;
	text-decoration:none;
	transition: background-color .3s;
	border: 1px solid #eeeeee; 
} 
ul.pagination li a.active {
	background-color:#eee;
	color:white;
	border: 1px solid #eeeeee;
}
ul.pagination li a:hover:not(.active) {background-color: #eeeeee;}
</style>
<body> 
	<input type="button" id ="bt1" value="调用选中行">
	<div id="testGrid" style="margin-top:20px;">  
	
	</div> 
	<script type="text/javascript">  
		(function($) {   
			
			function getAjaxData(opts){ 
				$.ajax({
				   type: "get",
				   url: opts.url,
				   async:false,
				   data: opts.param,
				   dataType:"json",
				   success: function(msg){ 
				       opts.data = msg;
				   }
				}); 
				return opts;
			}
			//getCook
			function getCookie(c_name)
			{
				if (document.cookie.length>0)
				  {
				  c_start=document.cookie.indexOf(c_name + "=")
				  if (c_start!=-1)
				    { 
				    c_start=c_start + c_name.length+1 
				    c_end=document.cookie.indexOf(";",c_start)
				    if (c_end==-1) c_end=document.cookie.length
				    return unescape(document.cookie.substring(c_start,c_end))
				    } 
				  }
				return "";
			}
			//设置cook
			function setCookie(c_name,value,expiredays)
			{
				var exdate=new Date()
				exdate.setDate(exdate.getDate()+expiredays)
				document.cookie=c_name+ "=" +escape(value)+
				((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
				} 
				function checkCookie()
				{
				username=getCookie('username')
				if (username!=null && username!="")
				  {alert('Welcome again '+username+'!')}
				else 
				  {
				  username=prompt('Please enter your name:',"")
				  if (username!=null && username!="")
				    {
				    setCookie('username',username,365)
				    }
				  }
			}
			//得到自动适应的列宽
			function getAutoTdWidth(opts){ 
				//计算宽度
				var showCol = 0;
				for(var i=0;i<opts.columns.length;i++){
					if(typeof(opts.columns[i].hidden)!="undefined" && opts.columns[i].hidden ==true){
						showCol++;
					}
				}
				var autoTdWidth = (opts.tableWidth) /(opts.columns.length  - showCol); 
				return autoTdWidth;
			}
			
			//调用初始化方法 
			function init(opts) { 
				opts.before(opts);
				$("#"+opts.table_div).html("");
				if(opts.table_div==""||opts.table_div==null){
					console.log("grid调用组件Id不能为空");
					return;
				}  
				getAjaxData(opts);   
				//是否付增加checkbox
				opts = setCheckBoxAndnumber(opts);
				//调用头显示
				opts =  changeCooking_width(opts);
				opts =  changeCooking_hidden(opts);
				opts =  changeCooking_sort(opts);
				opts =  getTableWidthType(opts);    
				if(opts == false){
					console.log("表格设置有问题");
					return ;
				}  
				 changTable(opts);
				//增加分页
				if(opts.data.result.length> 0 && opts.page == true){ 
					pagediv.width(opts.tableWidth);
					$("#"+opts.table_div).append(pagediv);
					pageLister(pagediv,opts);
				}   
				opts.success(opts);
				
				last(opts);
			};
			//最后计算
			function  last(opts){
				var fontsize = $("html").css("font-size");
				console.log("fontsize"+fontsize);
				$("#"+opts.table_div).css({"font-size":fontsize}); 
				$("#"+opts.table_div).find(".houzhuo_divfoot").css({"font-size":fontsize}); 
				var height = $("#"+opts.table_div).find(".houzhuo_divfoot").children().height();
				$("#"+opts.table_div).find("input[type=text]").css({"height":height-4});
				$("#"+opts.table_div).find("select").css({"height":height-2});
			}
			
			//顺序问题
			function changeCooking_sort(opts){ 
				 var columns =	getCookie(opts.table_div+"cooking_sort"); 
				 if( columns == "" || columns == "[]"){ 
					 return opts;
				 } 
				 var sortList = eval(columns);
				 for(var i=0;i<sortList.length;i++){
					 for(var j=0;j<opts.columns.length;j++){
						   if(sortList[i].name == opts.columns[j].name){
							   opts.columns[j].name = sortList[i].name;
							   opts.columns[j].sort = i+1;
						   }
					   }  
				 }
				 opts.columns.sort(sortListby("sort"));
				 return opts;
			}
			//排序
			function sortListby(field){
					 return function(a,b) {
				        return a[field] - b[field];
				    }
			}
			//调用ck
			function changeck(opts){
				//ck事件
				$("th[name=checkbox_"+opts.table_div+"]").children().children().click({name:opts},function(event){
					ckfHead(this,event.data.name);
				});
				$("td[name=checkbox_"+opts.table_div+"]").children().children().click({name:opts},function(event){
					ckfHead(this,event.data.name);
				}); 
			}
			 // 对象转字符串
			function obj2str(o){
			    var r = [];
			    if(typeof o =="string") return "\""+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\"";
			    if(typeof o == "object"){
			        if(!o.sort){
			            for(var i in o)
			                r.push(i+":"+obj2str(o[i]));
			            if(!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)){
			                r.push("toString:"+o.toString.toString());
			            }
			            r="{"+r.join()+"}";
			        }else{
			            for(var i =0;i<o.length;i++)
			                r.push(obj2str(o[i]));
			            r="["+r.join()+"]";
			        }
			        return r;
			    }
			    return o.toString();
			}
			//和cook的内容进行对比 对比 宽度
			function changeCooking_width(opts){ 
			   var columns =	getCookie(opts.table_div+"cooking_width");  
			   if(columns =="" || columns.length <=0){
				   return opts;
			   }else{
				   var col = eval(columns);
				   for(var i=0;i<col.length;i++){
					   for(var j=0;j<opts.columns.length;j++){
						   if(col[i].name == opts.columns[j].name){
							   opts.columns[j].width = col[i].width;
						   }
					   } 
				   } 
			   } 
			   return opts;
			}
			//和cook的内容进行对比 对比显示
			function changeCooking_hidden(opts){ 
			   var columns =	getCookie(opts.table_div+"cooking_hidden");  
			   if(columns =="" || columns.length <=0){
				   return opts;
			   }else{
				   var col = eval(columns);
				   for(var i=0;i<col.length;i++){
					   for(var j=0;j<opts.columns.length;j++){
						   if(col[i].name == opts.columns[j].name){
							   opts.columns[j].hidden = col[i].hidden;
						   }
					   } 
				   } 
			   } 
			   return opts;
			}
			//chebox的换选事件
			function ckfHead(self,opts){ 
				 var tddiv=  $(self).parent();
				 var ck =tddiv.attr("ck"); 
				 var ckhead= tddiv.attr("ckhead");  
				 if(ck =="1"){
					 if(ckhead == "1"){
						 $("td[name=checkbox_"+opts.table_div+"]").children().children().html(checkboxf);
					 } 
					 tddiv.attr("ck","0");
					 tddiv.html(checkboxf);  
				 }else{
					 if(ckhead == "1"){
						 $("td[name=checkbox_"+opts.table_div+"]").children().children().html(checkboxt);
					 } 
					 tddiv.attr("ck","1");
					 tddiv.html(checkboxt); 
				 }
				 tddiv.children().click({name:opts},function(event){
					 ckfHead(this,event.data.name);
				 });
			} 
			//表格进行数据计算
			function changTable(opts){
				//计算head和body
				var bodydiv = showBody(opts,opts.data); 
				var headdiv = showHead(opts);  
				//计算是否显示滚动条
				setScoll(opts,headdiv,bodydiv);
				$(".houzhuo_divbody").scroll(function(){ 
		     		$(".houzhuo_divhead").scrollLeft($(this).scrollLeft());
		     	});
				changeck(opts);
			} 
			//分页的事件
			function pageLister(pagediv,opts){ 
				var  listLi = pagediv.find("li"); 
				$(listLi[0]).click({name:opts},function(event){
					$(listLi[2]).children().children().val(1); 
					var opts =event.data.name;
					opts.param.start = 1;
					opts  = getAjaxData(opts);  
					changTable(opts); 
				});
				$(listLi[1]).click({name:opts},function(event){ 
					var  value  = $(listLi[2]).children().children().val(); 
					value++; 
					if(value >=event.data.name.data.count){
						value = event.data.name.data.count;
					}
					$(listLi[2]).children().children().val(value); 
					var opts =event.data.name;
					opts.param.start = value;
					opts  = getAjaxData(opts);  
					changTable(opts); 
				}); 
				$(listLi[3]).click({name:opts},function(event){
					var  value  = $(listLi[2]).children().children().val(); 
					value--; 
					if(value <=0){
						value =1;
					}
					$(listLi[2]).children().children().val(value); 
					var opts =event.data.name;
					opts.param.start =value;
					opts  = getAjaxData(opts);  
					changTable(opts); 
				}); 
				$(listLi[4]).click({name:opts},function(event){   
					$(listLi[2]).children().children().val(event.data.name.data.count); 
					var opts =event.data.name;
					opts.param.start = event.data.name.data.count;
					opts  = getAjaxData(opts);  
					changTable(opts); 
				});
				$(listLi[6]).children().text("共"+opts.data.count+"页");
	
				//div内容展开
				$(listLi[7]).children().click({name:opts},function(event){ 
					var flag = changColor(this,event.data.name); 
					setTdWordbreak(flag);
				});
				//设置宽度
				$(listLi[8]).children().click({name:opts},function(event){
					changColor(this,event.data.name);
					var columns =  event.data.name.columns;
					$(".houzhuo_divbody").html(""); 
					$(".houzhuo_divbody").append("<div style='margin-top:10px;'>设置表格列宽度</div>");
					$(".houzhuo_divbody").append("<hr>");
					var input  = $('<div id="setTableWidth_houzhuodiv"></div>');
					for(var i=0;i<columns.length;i++){ 
						if(columns[i].name == "checkbox_"+opts.table_div){
							continue;
						}
						input.append(columns[i].showName+'：<input type="text" style="width:50px;" name="'+columns[i].name+'" value="'+columns[i].width+'">');
					} 
					$(".houzhuo_divbody").append(input);
					var btn = $("<input type='button' value='保存'>");
					var btn1 = $("<input type='button' value='关闭'>");
					$(".houzhuo_divbody").append("<hr>");
					$(".houzhuo_divbody").append(btn);
					$(".houzhuo_divbody").append(btn1);
					btn.click({name:opts},function(event){ 
						var opts = event.data.name;
						var  allf = [];
						for(var i=0;i<opts.columns.length;i++){
							var row  = opts.columns[i];
							if(row.name =="checkbox_"+opts.table_div){
								continue;
							}
							var obj = {};
							var input = $("#setTableWidth_houzhuodiv").find("[name="+row.name+"]");
							if(input.length>0){
								obj.width = $(input).val();
								obj.name = row.name;
								 opts.columns[i].width =obj.width; 
							} 
							allf.push(obj);
						}
						setCookie(opts.table_div+"cooking_width",obj2str(allf),365);
						getTableWidthType(opts);
						changTable(opts); 
					});
					btn1.click({name:event.data.name},function(event){
						changTable(event.data.name);
					});
				});
				//td显示顺序
				$(listLi[9]).children().click({name:opts},function(event){
					changColor(this,event.data.name); 
					var columns =  event.data.name.columns;
					$(".houzhuo_divbody").html(""); 
					$(".houzhuo_divbody").append("<div style='margin-top:10px;'>拖动设置表格列显示顺序</div>");
					$(".houzhuo_divbody").append("<hr>");
					var input  = $('<div id="setTableWidth_houzhuodiv"></div>');
					var ul = $("<ul style='list-style-type: decimal;'/>");
						ul.attr("id","sortUl_"+event.data.name.table_div);
					for(var i=0;i<columns.length;i++){ 
						if(columns[i].name == "checkbox_"+event.data.name.table_div){
							continue;
						}
						ul.append('<li name="'+columns[i].name+'" style=" background: #eeeeee;margin: 4px; width:100px;height:30px;line-height:30px;">'+columns[i].showName+'</li>'); 
					}  
					$(".houzhuo_divbody").append(ul); 
					var btn = $("<input type='button' value='保存'>");
					var btn1 = $("<input type='button' value='关闭'>");
					$(".houzhuo_divbody").append("<hr>");
					$(".houzhuo_divbody").append(btn);
					$(".houzhuo_divbody").append(btn1);
					$("#sortUl_"+event.data.name.table_div).sortable({
					         cursor: "move",
					         items :"li",                        //只是li可以拖动
					         opacity: 0.6,                       //拖动时，透明度为0.6
					         revert: true,                       //释放时，增加动画
					         update : function(event, ui){       //更新排序之后
					                
					           }
					 });
					//丛轩table
					btn1.click({name:event.data.name},function(event){
						changTable(event.data.name);
					});
					//保存顺序
					btn.click({name:event.data.name},function(event){
						var opts  = event.data.name; 
						var liList = $("#sortUl_"+opts.table_div).children();
						var sortList = [];
						for(var i = 0;i<liList.length;i++){
							var name  = $(liList[i]).attr("name");
							var obj = {};
							obj.order = i+1;
							obj.name = name;
							sortList.push(obj);
						} 
						setCookie(opts.table_div+"cooking_sort",obj2str(sortList),365);
						opts = changeCooking_sort(opts);
						getTableWidthType(opts);
						changTable(opts); 
					});
				});
				//td隐藏
				$(listLi[10]).children().click({name:opts},function(event){
					changColor(this,event.data.name);
					var columns =  event.data.name.columns;
					$(".houzhuo_divbody").html(""); 
					$(".houzhuo_divbody").append("<div style='margin-top:10px;'>设置表格列显示</div>");
					$(".houzhuo_divbody").append("<hr>");
					var input  = $('<div id="setTableWidth_houzhuodiv"></div>');
					for(var i=0;i<columns.length;i++){ 
						if(columns[i].name == "checkbox_"+opts.table_div){
							continue;
						}
						if(columns[i].hidden == true){
							input.append(columns[i].showName+'：<input type="checkbox" name="'+columns[i].name+'">');
						}else{
							input.append(columns[i].showName+'：<input type="checkbox" checked=checked name="'+columns[i].name+'">');
						}
						
					} 
					$(".houzhuo_divbody").append(input);
					var btn = $("<input type='button' value='保存'>");
					var btn1 = $("<input type='button' value='关闭'>");
					$(".houzhuo_divbody").append("<hr>");
					$(".houzhuo_divbody").append(btn);
					$(".houzhuo_divbody").append(btn1);
					btn.click({name:opts},function(event){ 
						var opts = event.data.name;
						var  allf = [];
						for(var i=0;i<opts.columns.length;i++){
							var row  = opts.columns[i];
							if(row.name =="checkbox_"+opts.table_div){
								continue;
							}
							var obj = {};
							var input = $("#setTableWidth_houzhuodiv").find("[name="+row.name+"]");
							if(input.length>0){
								var flag = $(input).is(":checked");
								if(flag == true){
									obj.hidden = false;
								}else{
									obj.hidden = true;
								} 
								obj.name = row.name;
								opts.columns[i].hidden =obj.hidden; 
							} 
							allf.push(obj);
						}
						setCookie(opts.table_div+"cooking_hidden",obj2str(allf),365);
						getTableWidthType(opts);
						changTable(opts); 
					});
					btn1.click({name:event.data.name},function(event){
						changTable(event.data.name);
					}); 
				});  
			}
			//设置行的是否折行
			function setTdWordbreak(flag){
				if(flag == 0){
					//console.log(0)
					$(".tddiv").css({"text-overflow":"inherit" ,"white-space": "nowrap"});
				}else{
					//console.log(1)
					$(".tddiv").css({"text-overflow":"ellipsis" ,"white-space": "pre-wrap"});
				} 
			} 
			//改变Table的foot下功能图标的颜色
			function changColor(self,opts){
				var color =$(self).children().css("color");
				if(color == "rgb(0, 0, 0)"){
					$(self).children().css({"color":"red"}); 
					return 1;
				}else{
					$(self).children().css({"color":"rgb(0, 0, 0)"});
					return 0;
				}
			}
			//设置checkbox
			function setCheckBoxAndnumber(opts){ 
				if(opts.checkbox == true){
					var  ck = {name:"checkbox_"+opts.table_div,showName:checkboxf,width:"40",hidden:false};
					opts.columns.splice(0,0,ck);
				} 
				return opts;
			};
			//计算滚动条
			function getScrollWidth() {
			  var noScroll, scroll, oDiv = document.createElement("DIV");
			  oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
			  noScroll = document.body.appendChild(oDiv).clientWidth;
			  oDiv.style.overflowY = "scroll";
			  scroll = oDiv.clientWidth;
			  document.body.removeChild(oDiv);
			  return noScroll-scroll;
			}
			//计算关于滚动条的
			function setScoll(opts,headdiv,bodydiv){ 
				var tableBodyHeight = $(bodydiv).height();
				var tableBodyTableHeight = $(bodydiv).children().height();
				var colNameLasthidden = getLastTdHidden(opts); 
				var soCwidth = getScrollWidth()+4; 
				if(tableBodyTableHeight > tableBodyHeight){
					var allchangeTd = $(bodydiv).find("td[name="+colNameLasthidden+"]");
					var width = allchangeTd.width(); 
					allchangeTd.width(width-soCwidth-8);
					allchangeTd.css({"border-right":"1px solid #eeeeee"}); 
					var allchangeTh = $(headdiv).find("th[name="+colNameLasthidden+"]");
					allchangeTh.width(width-soCwidth-8);
					allchangeTh.css({"border-right":"1px solid #eeeeee"});
					$(bodydiv).find("tr").last().children().css({"border-bottom":"0px solid #eeeeee"});  
				} 
			}
			//设置最后一个显示的Td,th的右边框为隐藏的列名
			function getLastTdHidden(opts){
				var ColName = "";
				for(var i=0;i<opts.columns.length;i++){
					var col =opts.columns[i];
					if(col.hidden ==false || typeof(col.hidden) =="undefined"  ){
						ColName = col.name;
					}
				}
				return ColName;
			}
			//设置第一一个显示的Td,th的左边框为隐藏的列名
			function getFristTdHidden(opts){
				var ColName = "";
				for(var i=0;i<opts.columns.length;i++){
					var col =opts.columns[i];
					if(col.hidden ==false || typeof(col.hidden) =="undefined" ){
						ColName = col.name;
						return ColName;
					}
				} 
			}
			//得到Table宽度
			function getTableWidthType(opts){  
					var colSumWidth =0;
					var columber = 0; //显示列数
					var columberhidden=0;//隐藏列 
					var cbk=0;
					for(var i=0;i<opts.columns.length;i++){ 
						var col = opts.columns[i];
						if(col.hidden ==false || typeof(col.hidden) =="undefined" ){
							opts.columns[i].hidden = false;
						}else{
							opts.columns[i].hidden = true;
						}
						if(opts.columns[i].hidden == true){
							columberhidden++;
						}else{
							columber++;
						}
						if(opts.columns[i].hidden == false && opts.columns[i].width.length>0){
							colSumWidth+=parseFloat(opts.columns[i].width);
						}
						if(typeof(opts.columns[i].width)=="undefined" ||opts.columns[i].width.length <=0){
							if(opts.columns[i].hidden ==false){
								cbk++;
							}
						}
					}
					opts.tableRealWidth =0;
				    if(colSumWidth>opts.tableWidth){   
				    	for(var i=0;i<opts.columns.length;i++){
				    		if(opts.columns[i].hidden ==false){
				    			opts.columns[i].realWidth = opts.columns[i].width;
				    			opts.tableRealWidth+=parseFloat(opts.columns[i].width);
				    		} 
				    	} 
				    }else{
				    	var lastWidth = opts.tableWidth - colSumWidth;   
				    	if(lastWidth > 1){
				    		for(var i=0;i<opts.columns.length;i++){
					    		if(typeof(opts.columns[i].width)=="undefined" ||opts.columns[i].width.length <=0){					    			 
					    			opts.columns[i].realWidth = lastWidth/cbk;
					    			opts.tableRealWidth+=parseFloat(lastWidth/cbk);
					    		}else{
					    			opts.columns[i].realWidth = opts.columns[i].width;
					    			opts.tableRealWidth+=parseFloat(opts.columns[i].width);
					    		} 
					    	}  
				    	} 
				    } 
				return opts;
			}
			//调用显示数据的方法
			function showBody(opts,data){
				 var tbody = $("<tr/>"); 
				 $("#"+opts.table_div).find(".houzhuo_divbody").remove();
				 var tbodyDiv=$("<div class='houzhuo_divbody'></div>"); ; 
				if(data==null || data.result==null || data.result.length<=0){ 
					 tbodyDiv.append("无数据");
					 tbodyDiv.css({"width":opts.tableWidth,height:opts.tableHeight});
					return tbodyDiv;
				}  
				//正式创建Table
				var tbody = $("<tbody/>");
				var borderOne  = getFristTdHidden(opts);
				var borderLast = getLastTdHidden(opts);   
				for(var j=0;j<data.result.length;j++){
					var row = data.result[j];
					var tbodytr = $("<tr/>"); 
					for(var i=0;i<opts.columns.length;i++){
						 var tdc = opts.columns[i]; 
						 if(tdc.name =="checkbox_"+opts.table_div){
							 var divtd = $("<div class='tddiv' style='margin:0 auto;text-align:center;'></div>");
							 var td = $("<td/>"); 
							 divtd.append(tdc.showName);
							 td.attr("name","checkbox_"+opts.table_div);
							 td.append(divtd);
							 divtd.data("row",row);
							 tbodytr.append(td);
							 if(tdc.name  == borderOne){
								 td.css({"border-left":"0px solid #eeeeee"});
							 } 
							 if(j==0){
								 td.css({"border-top":"0px solid #eeeeee"});
							 }
							 td.css({"width":tdc.realWidth}); 
							 continue;
						 }
						 var divtd = $("<div class='tddiv'></div>");
						
						 var td = $("<td/>"); 
						 if(typeof(row[tdc.name])!="undefined"){ 
							 td.attr("name",tdc.name);
							 divtd.text(row[tdc.name]);
						 }else{
							 td.attr("name",tdc.name);
							 divtd.text("");
							
						 }
						 divtd.data("row",row); 
						 if(typeof(tdc.format)=="function"){ 
							 var fk = tdc.format(data,row); 
							 divtd.html(fk);
						 }
						 td.append(divtd);  
						 td.css({"width":tdc.realWidth});
						 if(tdc.name  == borderLast){
							 if(opts.tableWidth < opts.tableRealWidth){
								 td.css({"border-right":"0px solid #eeeeee"});
							 }else{
								 td.css({"border-right":"1px solid #eeeeee"});
							 }
						 } 
						 if(j==0){
							 td.css({"border-top":"0px solid #eeeeee"});
						 } 
						 if(tdc.name == borderOne){
							 td.css({"border-left":"0px solid #eeeeee"});
						 } 
						 if(tdc.hidden && tdc.hidden == true){
							 td.css({"display":"none"});
						 }  
						 tbodytr.append(td);   
					 } 
					tbody.append(tbodytr);
				}  
				 var tbodyTable =$("<table id='houzhuo_table_body_"+opts.table_div+"' class='houzhuo_table'/>");
				 tbodyTable.append(tbody); 
				 tbodyDiv.append(tbodyTable);  
				 $("#"+opts.table_div).prepend(tbodyDiv); 
				 tbodyTable.css({"width":opts.tableRealWidth});   
				 tbodyDiv.css({"width":opts.tableWidth,height:opts.tableHeight});
				 return tbodyDiv;
			}
			//加载显示头
			function showHead(opts){
				 var thead = $("<tr/>");
				 $("#"+opts.table_div).find(".houzhuo_divhead").remove();
				 var theadDiv=$("<div class='houzhuo_divhead'></div>"); 
				 var borderOne  = getFristTdHidden(opts);
				 var borderLast = getLastTdHidden(opts);  
				 if(opts == false){
					 console.log("表格设置表头不对");
					 return;
				 }   
				 for(var i=0;i<opts.columns.length;i++){
					 var thc = opts.columns[i];
					 var th = $("<th/>");
					 var divth = $("<div class='tddiv' ck='0' ckhead='1' style='margin:0 auto;text-align:center;'></div>");
					 divth.append(thc.showName);
					 th.append(divth);
					 th.attr("name",thc.name); 
					 th.css({"width":thc.realWidth});
					 thead.append(th);
					 if(thc.name == borderOne){ 
						 th.css({"border-left":"0px solid #eeeeee"});
					 }
					 if(thc.name  == borderLast){
						 if(opts.tableWidth < opts.tableRealWidth){
							 th.css({"border-right":"0px solid #eeeeee"});
						 }else{
							 th.css({"border-right":"1px solid #eeeeee"});
						 } 
					 } 
					 if(thc.hidden && thc.hidden == true){
						 th.css({"display":"none"});
					 } 
				 } 
				 var theadTable =$("<table id='houzhuo_table_head_"+opts.table_div+"' class='houzhuo_table'/>");
				 theadTable.append(thead);  
				 var divw = $('<div></div>');
				 divw.css({"width":opts.tableRealWidth+30});
				 divw.append(theadTable);  
				 theadDiv.append(divw);  
				 $("#"+opts.table_div).prepend(theadDiv);
				 theadTable.css({"width":opts.tableRealWidth});   
				 theadDiv.css({"width":opts.tableWidth});
				//调用重写
				opts.reHead(opts,theadDiv);
				return theadDiv;
			}
			function getRows(opts){ 
				var list = $('td[name=checkbox_'+opts.table_div+']').children("[ck=1]");
				var array = [];
				 for(var i=0;i<list.length;i++){ 
					 var div = list[i]; 
					 array.push($(div).data("row"));
				 } 
				 return  array;
			}
			// 组件初始化
			$.fn.houzhuoGrid = function(method, options) {
				if (typeof (method) == "string") {
					return $.fn.houzhuoGrid.methods[method](options);
				} else {
					var opts = $.extend({}, $.fn.houzhuoGrid.defaults, method);
					init(opts);
				}
			};  
			// 组件默认参数
			$.fn.houzhuoGrid.defaults = { 
				tableHeight:"auto",
				tableWidth:"auto", 
				table_div:"",
				table_url:"", 
				parameter:{
					start:1,
					limit:20,
					count:0,
				},
				before:function(opts){
					//调用成功数据之前
				},
				success:function(opts) {
					// alert("d");
				},
				reHead:function(opts,theadDiv){
					//重写头，继续写头的方法
					console.log("---reHead默认头方法---");
				}
			};
			// 组件方法注册
			$.fn.houzhuoGrid.methods = {
				getRows : function(opts) {
					 return getRows(opts);
				} 
			};
			var icon1 ='<svg  style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1022"><path d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" p-id="1023"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z" p-id="1024"></path></svg>';
			var icon3 ='<svg   style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2465"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 208H676V232h212v136z m0 224H676V432h212v160zM412 432h200v160H412V432z m200-64H412V232h200v136z m-476 64h212v160H136V432z m0-200h212v136H136V232z m0 424h212v136H136V656z m276 0h200v136H412V656z m476 136H676V656h212v136z" p-id="2466"></path></svg>';
			var icon2 ='<svg  style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3873"><path d="M894 462c30.9 0 43.8-39.7 18.7-58L530.8 126.2a31.81 31.81 0 0 0-37.6 0L111.3 404c-25.1 18.2-12.2 58 18.8 58H192v374h-72c-4.4 0-8 3.6-8 8v52c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-52c0-4.4-3.6-8-8-8h-72V462h62zM512 196.7l271.1 197.2H240.9L512 196.7zM264 462h117v374H264V462z m189 0h117v374H453V462z m307 374H642V462h118v374z" p-id="3874"></path></svg>';
			var icon4 ='<svg  style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5881"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM695.5 365.7l-210.6 292c-12.7 17.7-39 17.7-51.7 0L308.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H689c6.5 0 10.3 7.4 6.5 12.7z" p-id="5882"></path></svg>';
			var checkboxf ='<svg  style=" vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9458"><path d="M809.984 128q34.005333 0 59.989333 25.984t25.984 59.989333l0 596.010667q0 34.005333-25.984 59.989333t-59.989333 25.984l-596.010667 0q-34.005333 0-59.989333-25.984t-25.984-59.989333l0-596.010667q0-34.005333 25.984-59.989333t59.989333-25.984l596.010667 0zM809.984 214.016l-596.010667 0 0 596.010667 596.010667 0 0-596.010667z" p-id="9459"></path></svg>';
			var checkboxt ='<svg  style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9557"><path d="M924 64H100c-19.9 0-36 16.1-36 36v824c0 19.9 16.1 36 36 36h824c19.9 0 36-16.1 36-36V100c0-19.9-16.1-36-36-36zM753.8 403.1L485.1 671.8c-7 7-16.2 10.5-25.5 10.5s-18.4-3.5-25.5-10.5l-164-164c-14.1-14.1-14.1-36.9 0-50.9 14.1-14.1 36.9-14.1 50.9 0l138.6 138.6 243.2-243.2c14.1-14.1 36.9-14.1 50.9 0 14.2 14 14.2 36.7 0.1 50.8z" p-id="9558"></path></svg>';			
			var pagediv = $('<div class="houzhuo_divfoot"><ul class="pagination"> <li><a href="#" style="border-right:0px;">首页</a></li><li><a href="#"  style="border-right:0px;">下一页</a></li><li><a href="#" style="padding:0px;"> '
							+'<input type="text" style="height:18px;border:0px;width:50px;text-align:center;border-right:0px;" value="1"> </a></li> <li><a href="#"  style="border-right:0px;border-left:0px;">上一页</a></li>'
							+'<li><a href="#"  style="border-right:0px;">尾页</a></li> <li><a href="#" style="padding:0px;"><select style="height:20px;border:1px;width:50px;text-align: center;">'
							+'<option>5</option><option>10</option><option selected="selected">20</option><option>40</option><option>60</option><option>80</option>'
							+'<option>100</option> </select></a></li> <li><a href="#"  style="border-left:0px;">共100页</a></li></ul><ul class="pagination"><li><a>'+icon1+'</a></li><li><a style="border-left:0px;">'+icon2+'</a></li><li><a  style="border-left:0px;">'+icon3+'</a></li><li><a  style="border-left:0px;">'+icon4+'</a></li></ul></div>');
			 
		})(jQuery);
	</script>

	<script type="text/javascript">
		(function() { 
			$("#houzhuoGrid").houzhuoGrid({
				table_div:"testGrid",
				tableWidth:1000,
				tableHeight:500, 
				checkbox:false,
				page:true,
				url:"${pageContext.request.contextPath}/demo.do",
				param:{start:1,count:223,limit:20,result:[]},
				columns:[
					{name:"table_id",showName:"主键id",width:"50",hidden:false},
					{name:"nubmer",showName:"数值",width:"100",hidden:false},
					{name:"state",showName:"状态",width:"50",hidden:false,format:function(data,row){ 
						if(row.state ==1){
							return '<font color=red>fuck</font>';
						}else{ 
							return '<font color=green>fuck</font>';
						} 
					}},
					{name:"name",showName:"名称",width:"100",hidden:false},
					{name:"value",showName:"内容",width:"300",hidden:true} 
				]
			});
		})();  
		$("#bt1").click(function(){ 
			var array = $("#aaa").houzhuoGrid("getRows",{table_div:"testGrid"});
		});
		
	</script>
 
</body>
</html>